<template>
    <div class="login-wrapper" >
        
        <div class="login-container">
            
            <div class="login-main">
                
                    <el-form :model="user" ref="userRef" :rules="rules">
                        <div class="login-title">用户登录</div>
                        <el-form-item prop="phone"  class="input-deep">
                            <el-input prefix-icon="el-icon-mobile-phone" v-model="user.phone" placeholder="请输入手机号码" />
                        </el-form-item>
                        <el-form-item prop="code" class="input-deep btn-deep2" >
                          
                            <div style="display: flex;justify-content: space-around;">
                                <el-input prefix-icon="el-icon-lock" v-model="user.code" placeholder="请输入验证码" style="width: 80%;" />
                                <el-button style="margin-left: 10px;" @click="sendSms" :disabled="send.flag">{{ send.text }}</el-button>
                                
                            </div>
                           
                            
                        </el-form-item>
                        <el-form-item class="btn-deep" style="text-align: center;">
                            <el-button style="width: 100%; " @click="submit">登 录</el-button>
                            <div class="user-option">
                                <div style="display: flex;">
                                    没有账号?<div class="register-option" @click="$router.push('register')">立即注册</div>
                                </div>
                                
                                <div class="reset-password-option" @click="$router.push('/reset/password')">忘记密码</div>
                                
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
        </div>

    </div>
</template>

<script>

import {rules} from '@/utils/rules'
import {get,post} from '@/utils/api.js'


export default {

    

    data(){
        let checkPhone = (rule, value, callback)=>{

            if(!rules.phone.test(value)){
                return callback(new Error('手机号码格式错误'));
            }
            return callback();
        
        }
        return{
            user:{},
            rules:{
                phone:[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator:checkPhone,trigger:'blur'}],
                code:[{ required: true, message: '请输入验证码', trigger: 'blur' },]
            },
            send:{
                flag:false,
                text:'发送验证码',
                sec:60,
                timer:null
            }
            
        }
    },
    methods:{
        sendSms(){

            if(!this.user.phone||this.user.phone === null||this.user.phone === ''||!rules.phone.test(this.user.phone)){
                this.$message.error('手机号码为空或不合法~');
                return;
            }

            this.send.flag = true;

            const promise = get({
                url:'/base-sms/sms/send/captcha',
                params:{phone:this.user.phone}
            });
            promise.then(res=>{
                if(res&&res.code===200){
                    this.countdown();
                    this.$message.success(res.message);
                    return;
                }
                // this.$message.error(res.message);
            });
            
            
            
            

        },
        countdown(){
            if(this.send.timer === null){
                this.send.timer = setInterval(()=>{

                    if(this.send.sec>0){
                        this.send.sec -=1;
                        this.send.text = `重新发送(${this.send.sec})`
                    }else{
                        clearInterval(this.send.timer);
                        this.send.flag = false;
                        this.send.sec = 60;
                        this.send.timer = null;
                        this.send.text = '发送验证码'
                        
                        
                    }


                },1000)
            }
        },
        submit(){
            this.$refs['userRef'].validate(valid=>{

                if(valid){
                   const promise = post({
                        url:'/base-auth/oauth/token',
                        data:{
                            client_id:'client_sns',
                            client_secret:'secret_sns',
                            grant_type:'sms',
                            phone:this.user.phone,
                            code:this.user.code
                        }
                    },false,false);

                    promise.then(res=>{
                        if(res){
                            let token = `${res.token_type} ${res.access_token}`;
                            
                            let refreshToken = res.refresh_token;

                            localStorage.setItem('token',token);
                            localStorage.setItem('refreshToken',refreshToken);
                            this.$message.success('登录成功~');

                            let lastRoute = sessionStorage.getItem('lastRoute');
                            if(lastRoute&&lastRoute!='/register'&&lastRoute!='/reset/password'&&lastRoute!='/login'){
                                this.$router.push(lastRoute);
                            }else{
                                this.$router.push('/index')
                            }

                            return;
                        }
                    })

                }

            });
        }

    }

}
</script>

<style scoped>

.login-container{
    background-color: #fff;
    width: 500px;
    height: 400px;
    
    border: 1px solid #dcdfe6;

    border-radius: 10px;
    

    animation: bounceInDown 1s;
}

.login-title{
    width: 100%;
    text-align: center;
   /* padding-top: 40px; */
   padding-bottom: 20px;
   font-weight: 900;
   color: #FF6900;
   font-size: 26px;
    
}
.login-main{
    width: 100%;
    height: 400px;
    /* align-items: center; */
    display: flex;
    justify-content: center;
    align-items: center;
}



.btn-deep >>>button{
    border-radius: 0;
    background-color: #FF6900;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}
.input-deep>>>input{
    border: 1px solid #dcdfe6;
    border-radius: 0;

}
.btn-deep2>>>button{
    border-radius: 0;
    background-color: #fff;
    color: #999;
    font-weight: 400;
    letter-spacing: 2px;
    /* border-top: 0; */
    /* border-left: 0; */
}

.user-option{
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    color: #999;

}

.reset-password-option:hover{
    color: #FF6900;
    cursor: pointer;
}
.register-option:hover{
    color: #FF6900;
    cursor: pointer;
}
.login-wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #fff; */
    background-image: url('~@/assets/bg.jpg');
    background-size: 100% 100%;

}

</style>